<template>
  <div class="care">
    <!-- 头部 -->
    <div class="care_header">
      <!-- <div class="jiantou">&lt;</div> -->
      <van-icon class="jiantou" size="14" name="arrow-left"></van-icon>
      <div class="yinyue" @click="retHandler">{{ $route.query.title }}</div>
      <div class="sousuo" @click="toSearch">搜索</div>
      <div class="open" @click="toApp">打开app</div>
    </div>
    <!-- 内容区 -->
    <div class="care_content">
      <van-tabs v-model:active="active" color="red" @click-tab="qwerHandler" sticky offset-top="50">
        <van-tab title="全部">
          <div class="content_top">
            <div @click="change(1)" class="zonghe" :class="{
              active: params.sort === 1,
            }">
              综合排序
            </div>
            <div @click="change(3)" class="zonghe" :class="{
              active: params.sort === 3,
            }">
              最多播放
            </div>
            <div @click="change(2)" class="zonghe" :class="{
              active: params.sort === 2,
            }">
              最近更新
            </div>
          </div>

          <div class="content_btm">
            <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"
              :immediate-check="false">
              <div class="btm_one" v-for="item in categoryList2" :key="item.id" @click="toDetail(item)">
                <div class="one_left">
                  <img :src="`https://imagev2.xmcdn.com/` + item.albumCoverPath" />
                </div>
                <div class="one_right">
                  <div class="yese">{{ item.albumTitle }}</div>
                  <div class="pingjia">{{ item.intro }}</div>
                  <div class="bofang">
                    <img class="gg" src="./images/ganggang.png" />
                    <div class="num1">{{ item.albumTrackCount }}</div>
                    <img class="erji" src="./images/erji.png" />
                    <div class="num2">
                      {{ (item.albumPlayCount / 10000).toFixed(2) }} 万
                    </div>
                  </div>
                </div>
              </div>
            </van-list>
          </div>
        </van-tab>
        <van-tab v-for="item in categoryList1" :key="item.id" :title="item.displayName" :id="item.id">
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { onMounted } from "vue";
import categoryApi from "../../../api/category/index";
import { QueryObject, AnyObject } from "../../../api/category/type";
import { useRouter } from "vue-router";
const router = useRouter();
import { useRoute } from "vue-router";
const route = useRoute();
const active = ref(0);
const categoryList1 = ref<QueryObject[]>([]);
const categoryList2 = ref<AnyObject[]>([]);
let title = ref<string>();
let categoryId = ref<string>();
const loading = ref(false);
const finished = ref(false);

//下拉刷新
const onLoad = () => {
  // console.log(123)
  getCategoryList2(params);
};

const params = {
  pageNum: 1,
  pageSize: 20,
  sort: 1,
  categoryId: 2,
  metadataValues: "",
};
//综合排序改变
const change = (count: number) => {
  params.sort = count;
  params.pageNum = 1;
  params.metadataValues = route.query.title as string;
  categoryList2.value = [];
  getCategoryList2(params);
};

onMounted(() => {
  categoryId.value = route.query.categoryId as string;
  params.categoryId = +categoryId.value;
  title.value = route.query.title as string;
  getCategoryList1(+route.query.categoryId!);
  getCategoryList2(params);
});

//去搜索页面
const toSearch = () => {
  router.push({
    path: "/search",
  });
};
//点击下载app去下载页面
const toApp = () =>{
  router.push({
    path:'/download'
  })
}

//去详情页面
const toDetail = (item: any) => {
  // console.log(item)
  router.push({
    name: "detail",
    params: {
      id: item.albumId,
    },
  });
};

//获取一级列表的功能函数
const getCategoryList1 = async (categoryId: number) => {
  let result = await categoryApi.reqCateList1(categoryId);
  categoryList1.value = result.data.metadata[0].metadataValues;
};

//获取二级列表的功能函数
const getCategoryList2 = async (params: AnyObject) => {
  loading.value = true;
  let result = await categoryApi.reqCateList2(params);
  if (result.data.albums.length > 0) {
    categoryList2.value.push(...result.data.albums);
    params.pageNum++;
    loading.value = false;
  } else {
    finished.value = true;
  }
};

//返回页面
const retHandler = () => {
  router.push({
    path: "/category",
  });
};

//点击
const qwerHandler = (a: any) => {
  // console.log(111)
  // console.log(title.value,a.title);
  if (a.title === "全部") {
    params.metadataValues = "";
  } else {
    params.metadataValues = `${title.value},${a.title}`;
  }

  getCategoryList2(params);
  let index = active.value - 1;
  router.push({
    path: "/cart",
    query: {
      categoryId: route.query.categoryId,
      displayName: a.title,
      index,
    },
  });
};
</script>

<style lang="less" scoped>
.care {
  width: 100%;
  height: 100%;

  .care_header {
    position: fixed;
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    z-index: 5;
    background: #fff;
    // position: relative;

    .jiantou {
      font-size: 18px;
    }

    .yinyue {
      font-size: 14px;
      margin-left: 5px;
      // flex-grow: 1;
    }

    .sousuo {
      flex-grow: 1;
      height: 30px;
      background: #eff1f4;
      font-size: 14px;
      border-radius: 30px;
      margin-left: 15px;
      // flex-shrink: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #ababab;
    }

    .open {
      width: 68px;
      height: 30px;
      font-size: 14px;
      margin-left: 15px;
      
      border: 1px solid red;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 30px;
      color: red;
    }
  }

  .care_content {
    padding-top: 50px;
    .content_top {
      
      font-size: 16px;
      display: flex;
      border-top: 1px solid #ababab;
      height: 43px;
      align-items: center;

      .zonghe {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 90px;
        height: 26px;

        border-radius: 20px;

        &.active {
          color: #f86442;
          border: 1px solid #f86442;
        }
      }
    }

    .content_btm {
      .btm_one {
        height: 120px;

        display: flex;
        border-bottom: 1px solid #c0bebe;

        .one_left {
          width: 100px;
          height: 70px;
          position: relative;

          img {
            display: block;
            width: 80%;
            height: 100%;
            position: absolute;
            top: 15px;
            left: 10px;
          }
        }

        .one_right {
          width: 265px;
          height: 90px;
          position: relative;

          .yese {
            width: 265px;
            font-size: 18px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            position: absolute;
            top: 15px;
            left: 5px;
          }

          .pingjia {
            width: 265px;
            font-size: 12px;
            color: #9a9a9a;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            position: absolute;
            top: 40px;
            left: 5px;
          }

          .bofang {
            display: flex;
            color: #9a9a9a;
            position: absolute;
            top: 75px;
            left: 5px;

            .gg {
              display: block;
              width: 15px;
              height: 15px;
            }

            .num1 {
              font-size: 15px;
            }

            .erji {
              display: block;
              width: 15px;
              height: 15px;
              margin-left: 20px;
            }

            .num2 {
              font-size: 15px;
            }
          }
        }
      }
    }
  }
}
</style>
